<template>
    <div>
        <div ref="wrap" class="wrap">
            <div class="container">
                <div class="step">
                    <router-link to="/holdall"
                        ><span class="active">工具箱</span></router-link
                    >
                    &nbsp;&nbsp;<span>/</span>&nbsp;<router-link to="/classic_input"
                        ><span>起名详情</span></router-link
                    >
                </div>
                <div class="top-box box" v-if="wuGe">
                    <div class="title">
                        <div style="display: flex;align-items: center">
                            <span class="circle"></span>
                            名字测试分析
                        </div>

                        <div @click="check()" :class="['heart',{'no-heart-icon':!heartIcon},{'heart-icon':heartIcon}]">

                        </div>
                    </div>
                    <el-row :gutter="30">
                        <el-col :xl="10" :lg="10" :md="10" :sm="12" :xs="24">
                            <div class="name-box">
                                <div class="name" v-for="(item, index) in hanZiList" :key="index">
                                    {{item.word}}
                                </div>
                                <div class="name scoped">
									{{Number(score)}}
                                </div>
                            </div>
                            <div class="tips">
                                <div class="text">
                                    名字总评价及建议
                                </div>
                                <div class="text1">
                                    命局用神首选火土，火土为人生有利的五行，名字宜用火土属性的字，会比较有利健康、学业、事业、财运、婚姻，旺益家庭
                                </div>
                            </div>
                        </el-col>
                        <el-col :xl="7" :lg="7"  :md="7" :sm="12" :xs="24" class="name-info">
                            <el-row class="item">
                                <el-col class="left" :xl="10" :lg="10" :md="10"  :sm="10" :xs="10">
                                    姓名
                                </el-col>
                                <el-col class="right"  :xl="14" :lg="14"  :md="14" :sm="14" :xs="10">
									<span v-for="(item, index) in hanZiList" :key="index">
										{{item.word}}&nbsp;
									</span>
                                </el-col>
                            </el-row>
                            <el-row class="item">
                                <el-col class="left" :xl="10" :lg="10" :md="10"  :sm="10" :xs="10">
                                    繁体
                                </el-col>
                                <el-col class="right" :xl="14" :lg="14"  :md="14" :sm="14" :xs="10">
                                    <span v-for="(item, index) in hanZiList" :key="index">
										{{item.traditional}}&nbsp;
									</span>
                                </el-col>
                            </el-row>
                            <el-row class="item">
                                <el-col class="left" :xl="10" :lg="10" :md="10"  :sm="10" :xs="10">
                                    拼音
                                </el-col>
                                <el-col class="right" :xl="14" :lg="14"  :md="14" :sm="14" :xs="10">
                                    <span v-for="(item, index) in hanZiList" :key="index">
										{{item.pinyin}}&nbsp;
									</span>
                                </el-col>
                            </el-row>
                            <el-row class="item">
                                <el-col class="left" :xl="10" :lg="10" :md="10"  :sm="10" :xs="10">
                                    康熙笔画
                                </el-col>
                                <el-col class="right" :xl="14" :lg="14"  :md="14" :sm="14" :xs="10">
                                    <span v-for="(item, index) in hanZiList" :key="index">
										{{item.bihua}}&nbsp;
									</span>
                                </el-col>
                            </el-row>
                            <el-row class="item">
                                <el-col class="left" :xl="10" :lg="10" :md="10"  :sm="10" :xs="10">
                                    字意五行
                                </el-col>
                                <el-col class="right" :xl="14" :lg="14"  :md="14" :sm="14" :xs="10">
                                    <span v-for="(item, index) in hanZiList" :key="index">
										{{item.wuxing}}&nbsp;
									</span>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :xl="7" :lg="7"  :md="7" :sm="12" :xs="24" class="name-info">
                            <el-row class="item">
                                <el-col class="left" :xl="8" :lg="8" :md="8"  :sm="10" :xs="10">
                                    天格
                                </el-col>
                                <el-col class="right" :xl="16" :lg="16"  :md="16" :sm="14" :xs="10">
                                    ({{wuGe.tian.score}}{{wuGe.tian.wuxing}}) &nbsp;&nbsp;{{wuGe.tian.statusen}}
                                </el-col>
                            </el-row>
                            <el-row class="item">
                                <el-col class="left" :xl="8" :lg="8" :md="8"  :sm="10" :xs="10">
                                    地格
                                </el-col>
                                <el-col class="right" :xl="16" :lg="16"  :md="16" :sm="14" :xs="10">
                                    ({{wuGe.di.score}}{{wuGe.di.wuxing}}) &nbsp;&nbsp;{{wuGe.di.statusen}}
                                </el-col>
                            </el-row>
                            <el-row class="item">
                                <el-col class="left" :xl="8" :lg="8" :md="8"  :sm="10" :xs="10">
                                    人格
                                </el-col>
                                <el-col class="right" :xl="16" :lg="16"  :md="16" :sm="14" :xs="10">
                                    ({{wuGe.ren.score}}{{wuGe.ren.wuxing}}) &nbsp;&nbsp;{{wuGe.ren.statusen}}
                                </el-col>
                            </el-row>
                            <el-row class="item">
                                <el-col class="left" :xl="8" :lg="8" :md="8"  :sm="10" :xs="10">
                                    外格
                                </el-col>
                                <el-col class="right" :xl="16" :lg="16"  :md="16" :sm="14" :xs="10">
                                    ({{wuGe.wai.score}}{{wuGe.wai.wuxing}}) &nbsp;&nbsp;{{wuGe.wai.statusen}}
                                </el-col>
                            </el-row>
                            <el-row class="item">
                                <el-col class="left" :xl="8" :lg="8" :md="8"  :sm="10" :xs="10">
                                    总格
                                </el-col>
                                <el-col class="right" :xl="16" :lg="16"  :md="16" :sm="14" :xs="10">
                                    ({{wuGe.zong.score}}{{wuGe.zong.wuxing}}) &nbsp;&nbsp;{{wuGe.zong.statusen}}
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </div>
                <div class="c-center-box box">
                    <div class="title">
                        <span class="circle"></span>
                        五格数理剖析
                    </div>
                    <el-row class="item">
                        <!-- <div class="tips">天格是由姓决定的，寓意思想、智慧以及与长辈领导的关系，主要影响12岁以前，以及37-48岁的运势。</div> -->
						<div class="desc">
							{{wuGe.tian.desc}} <span class="tag">{{wuGe.tian.statusen}}</span>
						</div>
						<div class="text">详细解释</div>
						<div class="content" v-html="wuGe.tian.content">
						</div>
                    </el-row>
					<el-row class="item">
                        <!-- <div class="tips">天格是由姓决定的，寓意思想、智慧以及与长辈领导的关系，主要影响12岁以前，以及37-48岁的运势。</div> -->
						<div class="desc">
							{{wuGe.di.desc}} <span class="tag">{{wuGe.di.statusen}}</span>
						</div>
						<div class="text">详细解释</div>
						<div class="content" v-html="wuGe.di.content">
						</div>
                    </el-row>
					<el-row class="item">
                        <!-- <div class="tips">天格是由姓决定的，寓意思想、智慧以及与长辈领导的关系，主要影响12岁以前，以及37-48岁的运势。</div> -->
						<div class="desc">
							{{wuGe.ren.desc}} <span class="tag">{{wuGe.ren.statusen}}</span>
						</div>
						<div class="text">详细解释</div>
						<div class="content" v-html="wuGe.ren.content">
						</div>
                    </el-row>
					<el-row class="item">
                        <!-- <div class="tips">天格是由姓决定的，寓意思想、智慧以及与长辈领导的关系，主要影响12岁以前，以及37-48岁的运势。</div> -->
						<div class="desc">
							{{wuGe.wai.desc}} <span class="tag">{{wuGe.wai.statusen}}</span>
						</div>
						<div class="text">详细解释</div>
						<div class="content" v-html="wuGe.wai.content">
						</div>
                    </el-row>
					<el-row class="item">
                        <!-- <div class="tips">天格是由姓决定的，寓意思想、智慧以及与长辈领导的关系，主要影响12岁以前，以及37-48岁的运势。</div> -->
						<div class="desc">
							{{wuGe.zong.desc}} <span class="tag">{{wuGe.zong.statusen}}</span>
						</div>
						<div class="text">详细解释</div>
						<div class="content" v-html="wuGe.zong.content">
						</div>
                    </el-row>
                </div>
                <div class="c-bottom-box box">
					<div class="title">
                        <span class="circle"></span>
                        三才剖析
                    </div>
                    <el-row class="item">
						<div class="desc">
							{{sanCai.desc}} <span class="tag">{{sanCai.statusen}}</span>
						</div>
						<div class="content" v-html="sanCai.content">
						</div>
                    </el-row>
                </div>
            </div>
        </div>
        <GoTop></GoTop>
    </div>
</template>

<script>
import banner from "@/assets/images/classicName/banner2.png";
import GoTop from "../../components/goTop";
export default {
    data() {
        return {
			wuGe: '', // 返回的五格
			sanCai: '', // 返回的三才字段
			hanZiList: '', // 返回的名字列表
			firstName: '', // 姓
			lastName: '', // 名
			score: 0, // 姓名总评分
            heartIcon: true,//是否收藏
        }
    },
    components:{
        GoTop
    },
    created() {
		this.firstName = this.$route.query.firstName;
		this.lastName = this.$route.query.lastName;
		this.score = this.$route.query.score;
		this.heartIcon=this.$route.query.heartIcon=='true' ? true:false;
        this.nameParse();
    },
    methods: {
        //收藏取消
        check(){
            this.$ajax.post(this.heartIcon?'/util/unCollectName':'/util/collectName',{
                "xing":this.firstName,
                "ming":this.lastName
            }).then(res=>{
                if(res.data.code==0){
                    this.$message({
                        message: this.heartIcon?'收藏成功':'收藏取消',
                        type: 'success'
                    });
                }else {
                    this.$message.error(res.data.msg);
                }
            });
            this.$set(this,'heartIcon',!this.heartIcon);
            // console.log(val);
        },
        // 名字解析请求
        nameParse() {
            this.$ajax.get("/util/nameParse", {
                params: {
                    firstName: this.firstName,
                    lastName: this.lastName
                }
            }).then(res => {
				let ret = res.data;
                if (ret.code == 0) {
                    this.wuGe = ret.data.wuGe;
					this.sanCai = ret.data.sanCai;
					this.hanZiList = ret.data.hanZiList;
                } else {
                    this.$message.error("数据获取失败!")
                }
            })
        }
    },
    mounted() {
        console.log(this.heartIcon);
    }
}
</script>
 
<style scoped>
    .wrap {
        position: relative;
        background: url(../../assets/images/classicName/banner2.png) top no-repeat;
        font-size: 15px;
        background-color: rgb(241, 242, 249);
        padding-bottom: 1px;
    }

    .step {
        padding: 25px 0;
    }

    .step .active {
        color: #fff;
    }

    .step span {
        color: #ccc;
    }

    .box {
        background: #fff;
        padding: 30px;
        border-radius: 10px;
        margin-bottom: 30px;
    }

    .top-box .avatar-box {
        text-align: center;
        width: 90px;
        overflow: hidden;
        height: 90px;
    }

    .top-box .avatar-box img {
        width: 100%;
    }

    .top-box .item .left {
        color: rgb(131, 131, 131);
    }

    .top-box .item .right {
        color: rgb(61, 93, 234)!important;
    }

    .top-box .item-box .item {
        margin-top: 20px;
        display: flex;
        align-items: center;
    }

    .top-box .item-box .item:first-child {
        margin-top: 0px;
    }

    .top-box .item-box .item .persent {
        height: 6px;
        width: 100px;
        display: inline-block;
        vertical-align: center;
        border-radius: 3px;
        margin-left: 10px;
        background: linear-gradient(left, rgb(98, 146, 225), rgb(240, 240, 240));
    }

    .c-center-box .title,
    .top-box .title,
    .c-bottom-box .title {
        color: #000;
        font-size: 18px;
        display: flex;
        font-weight: 600;
        align-items: center;
    }
    .top-box .title{
        justify-content: space-between;
    }
    .c-center-box .title .circle,
    .top-box .title .circle,
    .c-bottom-box .title .circle {
        display: inline-block;
        border-radius: 50%;
        border: 4px solid rgb(250, 97, 102);
        width: 18px;
        margin-right: 10px;
        height: 18px;
    }

    .c-center-box .item {
        margin-top: 25px;
        line-height: 1.5;
    }

    .c-center-box .item .left {
        color: rgb(131, 131, 131);
    }

    .c-center-box .item .right {
        color: rgb(46, 46, 46);
    }

    .name-box {
        display: flex;
        align-items: center;
        margin-top: 20px;
    }

    .name-box .name {
        width: 60px;
		flex: 0 0 60px;
        height: 60px;
        font-weight: bold;
        background: url(../../assets/images/nameAnalysis/tianzige.png) no-repeat;
        background-size: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        margin-right: 15px;
    }

    .name-box .scoped.name {
		margin-top: 15px;
		width: 80px;
		height: 80px;
        overflow: hidden;
		margin-left: 50px;
		background: url(../../assets/images/nameAnalysis/score.png) no-repeat;
		background-size: 100%;
		font-size: 23px;
		color: #fff;
		line-height: 23px;
		display: flex;
		align-items: flex-start;
		padding-top: 13px;
    }

    .top-box .tips .text {
        color: #888;
        margin-top: 20px;
    }

    .top-box .tips .text1 {
        margin-top: 15px;
        line-height: 20px;
    }

    .top-box .name-info .left {
        text-align: left;
        color: #888;
    }

    .top-box .name-info .right {
        color: #333;
    }

    .top-box .name-info .item {
        margin-top: 15px;
	}
	
	 .item .tag {
		display: inline-block;
		background-color: rgb(250, 81, 86);
		color: #fff;
		padding: 4px 8px;
		line-height: 1;
		border-radius: 4px;
		margin-left: 10px;
	}

	.c-bottom-box .item .desc,
	.c-center-box .item .tips,
	.c-center-box .item .desc {
		font-size: 16px;
		color: #333;
		line-height: 1.8;
	}

	.c-center-box .item .text {
		font-size: 18px;
		color: #333;
		margin-top: 10px;
	}

	.c-bottom-box .item .content,
	.c-center-box .item .content{
		color: #333;
		line-height: 2;
		margin-top: 15px;
	}

	.c-center-box .item {
		border-bottom: 1px solid rgb(220, 220, 220);
		padding-bottom: 30px;
		margin-bottom: 30px;
	}

	.c-center-box .item:last-child {
		margin-bottom: 0;
		border: none;
		padding-bottom: 0;
	}

	.c-bottom-box .item {
		margin-top: 30px;
	}
    .heart{
        float: right;
        height: 33px;
        width: 33px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 33px 33px;
    }
    .no-heart-icon{
        background-image: url(../../assets/images/classicName/no_heart.png);
    }
    .heart-icon{
        background-image: url(../../assets/images/classicName/heart.png);
    }
</style>